@import './base.less';
@import './common.less';
@baseBorderColor: rgba(0,0,0,.08);

.mask{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.1);
  z-index: 100000;
}
.admin_history{
  background-color: #f8f8f8;
  position: relative;
  position: absolute;
  top:0;
  left: 0;
  right:0;
  bottom:0;
  .admin_history_title{
    padding: 10px 0;
    color: #000;
    font-size: 16px;
  }
  .user_list_con{
    .user_list_search_tool{
      padding: 20px 30px;
      .clearfix();
      .user_list_search_tool_input{
        width: 200px;
        height: 30px;
        float: left;
        input{
          padding:0 10px;
          width: 100%;
          height: 30px;
          .border_size();
          border:1px solid #ccc;
          border-radius: 5px;
        }
      }
      .user_list_search_btn{
        margin-left: 20px;
        width: 80px;
        height: 30px;
        float: left;
        line-height: 30px;
        text-align: center;
        font-size: 15px;
        border-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        img{
          width:14px;
          height: 14px;
          margin-right: 5px;
        }
      }
    }
    .user_list{
      overflow: hidden;
      display: block;
      padding: 0 30px;
      .user_list_item{
        margin-top: 20px;
        width: 25%;
        float: left;
        .user_list_item_top{
          .clearfix();
          position: relative;
          height: 50px;
          .user_list_item_left{
            position: absolute;
            img{
              width: 50px;
              height: 50px;
              border-radius: 25px;
            }
          }
          .user_list_item_right{
            padding-left: 60px;
            height: 100%;
            .distable();
            .name{
              .max_line(1);
              color: #333;
              font-size: 13px;
            }
            .time{
              color: #333;
              font-size: 13px;
            }
          }
        }
        .user_list_item_bottom{
          cursor: pointer;
          padding-left: 20px;
          margin-top: 8px;
          span{
            border-bottom: 1px solid #333;
            color: #333;
            font-size: 13px;
          }
        }
      }
    }
    .user_page_tool_con{
      margin-top: 30px;
      text-align: center;
      .user_page_tool{
        .clearfix();
        margin: 0 auto;
        position: relative;
        display: inline-block;
        .total{
          color: #999;
          font-size: 16px;
          float: left;
        }
        .actions_con{
          .clearfix();
          float: left;
          margin: 0 15px;
          .action{
            margin-left: 10px;
            color: #999;
            font-size: 16px;
            float: left;
            cursor: auto;
            &.active{
              color: #22A7F0;
              cursor: pointer;
            }
          }
          .action:nth-child(1){
            margin-left: 0;
          }
        }
        .page{
          float: left;
          color: #999;
          font-size: 16px;
        }
      }
    }
  }
}
.history{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  bottom:0;
  right:0;
  background-color: rgba(0,0,0,.8);
  z-index: 1001;
  .history_inner{
    width: 800px;
    position: absolute;
    top:20px;
    bottom: 20px;
    left: 50%;
    margin-left: -400px;
    background-color: #fff;
    .history_tool{
      height: 60px;
      line-height: 60px;
      width: 100%;
      .border_size();
      border-bottom: 1px solid #ccc;
      position: relative;
      .history_close_icon{
        width:30px;
        height: 30px;
        border-radius: 20px;
        background-color: #fff;
        background-image: url("/static/images/close-circled.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: absolute;
        top:15px;
        right: 30px;
        z-index: 1001;
        cursor: pointer;
      }
      .history_tool_title{
        padding-left: 30px;
        color: #999;
        font-size: 16px;
      }
    }
    .history_bottom{
      width: 100%;
      position: absolute;
      top:60px;
      left: 0;
      bottom: 0;
      right: 0;
      .clearfix();
      .history_chat_list_con{
        width: 75%;
        float: left;
        height: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
        .history_load_more{
          height: 50px;
          line-height: 50px;
          text-align: center;
          color: #333;
        }
        .history_loading{
          width: 100%;
          height: 100%;
          position: relative;
          z-index: 1002;
          background-color: #fff;
          text-align: center;
          .distable();
          .history_loading_inner{
            width:30px;
            height: 30px;
            /*css3动画无限制的旋转*/
            -webkit-animation: load_run 2s linear infinite;
            animation: load_run 2s linear infinite;
          }
        }

        .chat_list{
          height: 100%;
          overflow-y:visible;
          overflow-x: hidden;
          position: relative;
          z-index: 100;
          >div:nth-last-child(1){margin-bottom: 20px}
          >div:nth-child(1){margin-top: 20px}
          .no_history{
            padding: 20px 0 ;
            text-align: center;
            color: #999;
            font-size: 15px;
          }
          .chat_item_tips{
            text-align: center;
            padding: 5px 0;
            color: #999;
            font-size: 12px;
          }
          .chat_item{
            padding: 10px 30px;
            .clearfix();
            .chat_item_left{
              float: left;
              width:40px;
              height: 40px;
              border-radius: 20px;
              .chat_item_head{
                width:100%;
                height: 100%;
                border-radius: 20px;
              }
            }
            .chat_item_right{
              margin-left: 10px;
              float: left;
              .chat_item_name{
                color: #737373;
                font-size: 13px;
              }
              .chat_item_text{
                color: #333;
                font-size: 16px;
                border-radius: 3px;
                padding:5px 10px;
                max-width: 350px;
                background-color: #fff;
                border:1px solid #b4b4b4;
                position: relative;
                z-index: 100;
                word-break:break-all;
                .chat_item_text_emoji{
                  width: 24px;
                  height: 24px;
                }
              }
              .chat_item_voice_con{
                .clearfix();
                .chat_item_voice_time{
                  height: 34px;
                  line-height: 34px;
                  float: left;
                  margin-left: 5px;
                }
                .chat_item_voice{
                  float: left;
                  cursor: pointer;
                  min-width: 100px;
                  border-radius: 3px;
                  height:34px;
                  line-height: 34px;
                  max-width: 350px;
                  background-color: #fff;
                  border:1px solid #b4b4b4;
                  position: relative;
                  z-index: 100;
                  img{
                    width: 16px;
                    height: 16px;
                    position: absolute;
                    left: 10px;
                    top:9px;
                    .rotate(180deg);
                  }

                }
              }
              .chat_item_image{
                position: relative;
                border-radius: 3px;
                padding:5px;
                border:1px solid #b4b4b4;
                .chat_item_image_loading{
                  position: absolute;
                  left:5px;
                  z-index: 101;
                  background-color: #ccc;
                  text-align: center;
                  top:5px;
                  .distable();
                  .chat_item_image_loading_inner{
                    width:30px;
                    height: 30px;
                    /*css3动画无限制的旋转*/
                    -webkit-animation: load_run 2s linear infinite;
                    animation: load_run 2s linear infinite;
                  }
                }
                >.img{
                  position: relative;
                  z-index: 100;
                }
              }

              .chat_item_triangle{
                &.image{
                  background-color: #f8f8f8;
                }
                width:8px;
                height: 8px;
                background-color: #fff;
                border:1px solid #b4b4b4;
                position: absolute;
                z-index: 101;
                top:10px;
                left:-5px;
                border-top: none;
                border-right: none;
                .rotate(45deg);
              }
            }


            &.self{
              .chat_item_left{
                float: right;
              }
              .chat_item_right{
                float: right;
                margin-right: 15px;
                margin-left: auto;
                .chat_item_name{
                  text-align: right;
                }
                .chat_item_text{
                  background-color: #d1e8fc;
                  border-color: #add7fc;
                }
                .chat_item_image{
                  border-color: #add7fc;
                }
                .chat_item_voice_con{
                  .chat_item_voice_time{
                    float: right;
                    margin-right: 5px;
                  }
                  .chat_item_voice{
                    float: right;
                    background-color: #d1e8fc;
                    border-color: #add7fc;
                    img{
                      left: auto;
                      right: 10px;
                      .rotate(0deg);
                    }
                  }
                }

                .chat_item_triangle{
                  &.image{
                    background-color: #f8f8f8;
                  }
                  right:-5px;
                  left: auto;
                  background-color: #d1e8fc;
                  border-top: 1px solid #add7fc;
                  border-right: 1px solid #add7fc;
                  border-left: none;
                  border-bottom: none;
                }
              }
            }
          }
        }
      }
      .chater{
        width: 25%;
        float: right;
        height: 100%;
        border-left: 1px solid #ccc;
        .border_size();
        .chat_chater_msg{
          padding:0 20px;
          float: left;
          height: 100%;
          width: 100%;
          .chater_msg_title{
            height: 40px;
            color: #666;
            line-height: 40px;
            padding: 0 10px;
            border-bottom: 1px solid #666;
          }
          .chater_msg_content{
            .chater_msg_head{
              margin-top: 20px;
              .chater_msg_head_image{
                width: 100px;
                height: 100px;
              }

            }
            .chater_msg_name{
              font-size: 16px;
              margin-top: 20px;
              margin-bottom: 30px;
              color: #333;
            }
            .chater_msg_item{
              margin: 5px 0;
              font-size: 14px;
              color: #666;
              line-height: 1.8;
              position: relative;
              .clearfix();
              &.edit{
                height: 60px;
              }
              .chater_msg_item_name{
                width: 35px;
                position: absolute;
                word-break: break-all;
              }
              .chater_msg_item_content{
                padding-left: 35px;
                word-break: break-all;
              }
              .chater_msg_item_edit_textarea{
                position: relative;
                padding-left: 35px;
                padding-right: 20px;
                height: 60px;
                .chater_edit_input{
                  width: 100%;
                  height: 60px;
                  line-height: 1.2;
                  border: 1px solid #ebebeb;
                  padding:5px;
                }
                .chater_edit_save_icon{
                  height: 14px;
                  width: 14px;
                  cursor: pointer;
                  position: absolute;
                  right: 0;
                  bottom: 0px;
                  &.active{
                    /*css3动画无限制的旋转*/
                    -webkit-animation: load_run 2s linear infinite;
                    animation: load_run 2s linear infinite;
                  }
                }
              }

              .chater_msg_item_edit_content{
                padding-left: 35px;
                >span{
                  word-break: break-all;
                }
                .chater_edit_icon{
                  height: 14px;
                  width: 14px;
                  cursor: pointer;
                  margin-left: 3px;
                }
              }
            }
          }
        }
      }
    }

  }

}
//动画
@-webkit-keyframes load_run {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

